<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>
</body>
<script>
    var TypeCoding = {
        str:'',
        i:0,
        timer:null,
        box:'',
        typewriter:'',
        typeing:function(cb){
            var that = this;
            if (this.i <= this.str.length) {
                this.typewriter = this.str.slice(0, this.i++);
                this.box.innerHTML=this.typewriter;
                console.log(this.typewriter);
                this.timer = setInterval(() => {
                    console.log('2222')
                    that.typeing(cb)
                }, 80)
            } else {
                clearTimeout(that.timer)
                cb('结束了')
            }
        }
    }
    function start(box,str) {
        TypeCoding.str = str;
        TypeCoding.box = box;
        TypeCoding.i = 0;
        TypeCoding.timer =null;
        TypeCoding.typewriter ='';
        return new Promise((resolve) => {
            TypeCoding.typeing(resolve)
        })
    }
    
   

    async function startAll(){
        var str1 = "钱多钱少，开心到老。想清楚什么让自己得偿所愿，才是最应该做的事。";
        var str2 = "衡量幸福的标准，不是你活过的天数，而是你愿意记住的日子。"
       
        await start(document.getElementById('box2'),str2);
        await start(document.getElementById('box'),str1);
    }
    startAll()
</script>
</html>